<template>
  <div class="q-pa-md" style="max-width: 350px">
    <t-list bordered separator>
      <t-slide-item
        @left="onLeft"
        @right="onRight"
        left-color="red"
        right-color="purple"
      >
        <template v-slot:left>
          <div class="row items-center"> <t-icon left name="done" /> Left </div>
        </template>
        <template v-slot:right>
          <div class="row items-center">
            Right content.. long <t-icon right name="alarm" />
          </div>
        </template>

        <t-item>
          <t-item-section avatar>
            <t-icon color="primary" name="cell_wifi" />
          </t-item-section>
          <t-item-section>Custom colors (red, purple)</t-item-section>
        </t-item>
      </t-slide-item>

      <t-slide-item
        @left="onLeft"
        @right="onRight"
        left-color="amber"
        right-color="primary"
      >
        <template v-slot:left>
          <div class="row items-center text-black">
            <t-icon left name="done" /> Left
          </div>
        </template>
        <template v-slot:right>
          <div class="row items-center">
            Right content.. long <t-icon right name="alarm" />
          </div>
        </template>

        <t-item class="bg-grey-9 text-white">
          <t-item-section avatar>
            <t-icon color="amber" name="event" />
          </t-item-section>
          <t-item-section>Custom colors 2</t-item-section>
        </t-item>
      </t-slide-item>
    </t-list>
  </div>
</template>

<script>
  import { useQuasar } from '@teld/q-components';
  import { onBeforeUnmount } from 'vue';

  export default {
    setup() {
      const $q = useQuasar();
      let timer;

      function finalize(reset) {
        timer = setTimeout(() => {
          reset();
        }, 1000);
      }

      onBeforeUnmount(() => {
        clearTimeout(timer);
      });

      return {
        onLeft({ reset }) {
          $q.notify('Left action triggered. Resetting in 1 second.');
          finalize(reset);
        },

        onRight({ reset }) {
          $q.notify('Right action triggered. Resetting in 1 second.');
          finalize(reset);
        },
      };
    },
  };
</script>
